<template>
<!-- 综合查询模块-综合查询页面 -->
    <div class="fillcontain">
        <el-form :model="searchParams" :rules="rules" ref="ruleForm" label-width="100px" class="search_container">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="客户号：" prop="customerNo">
                        <el-input v-model="searchParams.customerNo" placeholder="客户号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="客户姓名：" prop="customerName">
                        <el-input v-model="searchParams.customerName" placeholder="客户姓名"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="手机号码：" prop="telephone">
                        <el-input v-model="searchParams.telephone" placeholder="手机号码"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="证件号码：" prop="idNo">
                        <el-input v-model="searchParams.idNo" placeholder="证件号码"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="性别：" prop="sex">
                        <el-col :span="24">
                            <el-select v-model="searchParams.sex" clearable placeholder="请选择性别">
                                <el-option
                                v-for="item in sexList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="出生日期：" prop="birthday">
                            <el-date-picker
                            v-model="searchParams.birthday"
                            type="date"
                            value-format="yyyyMMdd"
                            :picker-options="pickerOptions1"
                            placeholder="选择出生日期">
                            </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6">&nbsp;</el-col>
                <el-col :span="6" class="text_right">
                    <el-button type="primary" icon="el-icon-search" @click="subGetList"></el-button>
                    <el-button type="primary" plain  icon="el-icon-refresh" @click="resetSearch"></el-button>
                </el-col>
            </el-row>
        </el-form>
        <div class="contain">
          <div class="table_container">
            <el-table
                 v-loading="loading"
                 :data="tableData"
                  @row-dblclick="customerPro"
                 highlight-current-row
                 header-cell-class-name="table-header-class"
                 style="width:100%">
                <el-table-column
                width="100"
                    property="customerNo"
                    label="客户号"
                    align='center'
                    sortable>
                </el-table-column>
                 <el-table-column
                 width="100"
                   property="mark"
                   label="主副客标记"
                   align='center'>
                    <template slot-scope="scope">
                          <span v-if="scope.row.mark=='C'">主客</span>
                          <span v-if="scope.row.mark=='L'">副客</span>
                      </template>
                </el-table-column>
                 <el-table-column
                 width="100"
                   property="coreSource"
                   label="核心来源"
                   align='center'
                   sortable>
                </el-table-column>
                <el-table-column
                 width="140"
                   property="customerName"
                   label="客户姓名"
                   align='center'>
                   <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                        <p> {{ scope.row.customerName }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ scope.row.customerName }}</el-tag>
                        </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                    width="200"
                   property="idNo"
                   label="证件号码"
                   align='center'>
                </el-table-column>
                 <el-table-column
                   property="sex"
                   label="性别"
                   align='center'>
                    <template slot-scope="scope">
                          <span v-if="scope.row.sex=='M'">男</span>
                          <span v-if="scope.row.sex=='F'">女</span>
                          <span v-if="scope.row.sex=='U'">不明</span>
                      </template>
                </el-table-column> 
                  <el-table-column
                    width="120"
                   property="birthday"
                   label="出生年月"
                   align='center'>
                    <template slot-scope="scope">
                          <span>{{addSep(scope.row.birthday)}}</span>
                      </template>
                </el-table-column> 
                 <el-table-column
                    width="120"
                   property="relationPolicyNo"
                   label="是否有效保单号"
                   align='center'>
                </el-table-column>
                <el-table-column
                width="120"
                   property="relationMain"
                   label="关联主客"
                   align='center'>
                </el-table-column>
                <el-table-column
                width="120"
                   property="mobileTelephone"
                   label="手机号码"
                   align='center'>
                </el-table-column>
                <el-table-column
                width="200"
                   property="address"
                   label="地址"
                   align='center'>
                   <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                        <p> {{ scope.row.address }}</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{ scope.row.address }}</el-tag>
                        </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column 
                    fixed="right"
                   label="操作"
                   align='center'>
                    <template slot-scope="scope">
                        <span class="operationIcon" @click="customerPro(scope.row)">
                            <!-- 客户概况 -->
                            <el-tooltip class="item" effect="light" content="客户概况" placement="top">
                                <!--<icon-svg iconClass="customerProfile"></icon-svg>-->
                                <i class="el-icon-info"></i>
                            </el-tooltip>
                        </span>
                        <span class="operationIcon ml10" @click="cusRel(scope.row)">
                            <!-- 客户关系 -->
                            <el-tooltip class="item" effect="light" content="客户关系" placement="top">
                                <!--<icon-svg iconClass="crm"></icon-svg>-->
                                <i class="el-icon-share"></i>
                            </el-tooltip>
                        </span>
                    </template>
                </el-table-column>
            </el-table>
           <el-row>
                <el-col :span="24">
                    <div class="pagination">
                        <el-pagination
                            background
                            v-if='paginations.total > 0'
                            :page-sizes="paginations.pageSizes"
                            :page-size="paginations.pageSize"
                            :layout="paginations.layout"
                            :total="paginations.total"
                            :current-page='paginations.pageIndex'
                            @current-change='handleCurrentChange'
                            @size-change='handleSizeChange'>
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>
          </div>
        </div>
    </div>
</template>

<script>
    import { mapState, mapGetters } from 'vuex'
    // import { getComCheckList } from "@/api/comInquiry";
    import constant from '@/utils/constant';
    export default {
        data(){
            var validatePhone = (rule, value, callback) => {
                if (value) {
                    console.log(value)
                    if(!this.checkPhone(value)){
                        callback(new Error('输入的手机号码有误！'));
                    } else {
                        callback();
                    }
                }
            };
            return {
                // 查询条件
                rules:{
                    customerNo:[],
                    customerName:[],
                    telephone: [
                        { validator: validatePhone, trigger: 'blur' },
                    ],
                    birthday:[],
                    idNo:[],
                    sex:[]
                },
                searchParams:{
                    customerNo:'', //客户号
                    customerName:'', //客户姓名
                    telephone:'', //手机号码 
                    birthday:'', // 生日
                    idNo: '', // 证件号码
                    sex: '', //性别
                },
                sexList: constant.sex,
                tableData: [],
                loading:false,
              //需要给分页组件传的信息
                paginations: {
                    total: 0,        // 总数
                    pageIndex: 1,  // 当前位于哪页
                    pageSize: 10,   // 1页显示多少条
                    pageSizes: [5, 10, 15, 20],  //每页显示多少条
                    layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
                },
                pickerOptions1: {
                  disabledDate(time) {
                    return time.getTime() > Date.now();
                  }
                }
            }
        },
        created(){
//          this.getList();
        },
        mounted(){
            // this.getList();
        },
        methods: {
            
            // 综合查询列表
            getList(){
                this.paginations.total=0;
                this.tableData=[];
                let para = {
                    "customerNo": this.searchParams.customerNo,
                    "customerName": this.searchParams.customerName,
                    "telephone": this.searchParams.telephone,
                    "idNo": this.searchParams.idNo,
                    "sex": this.searchParams.sex,
                    "birthday": this.searchParams.birthday,
                    "pageSize": this.paginations.pageSize,
                    "pageNumber": this.paginations.pageIndex,
                    // "orderBy": "policyNo_desc"
                    "orderBy":"",
                }
                if(para.sex || para.birthday){
                    // 性别和生日 必须组合 客户号或者客户姓名或者手机号或者身份证其一查询
                    if(!para.customerNo&&!para.customerName&&!para.telephone&&!para.idNo){
                        this.$message({
                            message: '查询条件不足！',
                            type: 'error'
                        });
                        return false
                    }
                } 
                if(!para.customerNo&&!para.customerName&&!para.telephone&&!para.idNo&&!para.sex&&!para.birthday){
                    this.$message({
                        message: '请至少输入一个查询条件来查询！',
                        type: 'error'
                    });
                    return false
                }
                this.$store.dispatch('loading/CHANGE_LOADING',true)
                getComCheckList(para).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING',false)
                    if(res.resultCode == constant.SUCCESS && res.data && res.data.list.length){
                        this.paginations.total = res.data.total;
                        this.tableData = res.data.list;
                    }
                   
                }).catch(err =>{
                    this.$store.dispatch('loading/CHANGE_LOADING',false);
                })
            },
            // 每页多少条切换
            handleSizeChange(pageSize) {
               this.paginations.pageSize = pageSize;
               this.getList();
            },
            // 上下分页
            handleCurrentChange(page) {
               this.paginations.pageIndex = page;
               this.getList();
            },
            // 校验手机号
            checkPhone(phone){
                if(!(/^1[3456789]\d{9}$/.test(phone))){ 
                    return false; 
                } 
                return true
            },
            // 根据条件查询列表
            subGetList(){
                this.paginations.pageIndex=1;
                this.getList();
            },
            // 点击客户概况
            customerPro(item){
                // var timestamp=new Date().getTime();
                if(this.tags.length){
                    for(let i=0,len=this.tags.length;i<len;i++){
                        if(this.tags[i].customerNo && this.tags[i].customerNo == item.customerNo && this.tags[i].path.indexOf('customerProfile')>-1){
                            this.$router.push({path: this.tags[i].path,query:{
                                customerNo: item.customerNo,
                                customerName: item.customerName,
                                sex:item.sex,
                            }});
                            return
                        }
                    }
                }
                this.$router.push({path: '/qry/customerProfile/'+item.customerNo,query:{
                    customerNo: item.customerNo,
                    customerName: item.customerName,
                    sex:item.sex,
                }});
                this.$store.dispatch('CHANGE_ISSUB_SHOW',true)
            },
            // 点击客户关系
            cusRel(item){
                localStorage.setItem("customerNo",item.customerNo);
                this.$router.push({path:"/qry/cusRel/"+item.customerNo,query:{
                    customerNo: item.customerNo,
                }})
            },

            // 清除查询条件
            resetSearch(){
                this.searchParams.customerNo = '';
                this.searchParams.customerName = '';
                this.searchParams.telephone = '';
                this.searchParams.idNo = '';
                this.searchParams.sex = '';
                this.searchParams.birthday = '';
            }
        },
        computed:{
            ...mapGetters(['tags']),
            reload(){
                return this.$store.state.loading.reload;
            }
        },
        activated(){
            if(this.reload){
                this.$store.dispatch('loading/CHNAGE_RELOAD',false)
                Object.assign(this.$data, this.$options.data());
            }
        }
    }
</script>

<style lang="less" scoped>
    .fillcontain{
        padding-bottom: 0;
    }
    .contain{
        background: #fff;
        padding: 10px;
        margin-bottom: 20px;
    }
   .pagination{
       padding: 10px 20px;
       text-align: right;
   }
   .operationIcon{
        // padding: 12px;
        border:1px solid #e5e5e5;
        border-radius: 50%;
        width: 22px; 
        height: 22px;
        display: inline-block;
        cursor: pointer;
        box-shadow:0 0 3px #f9f9f9;
        .svg-icon{
            font-size: 14px;
            fill:#68a3fc;
        }
   }
   .search_container{
       padding: 20px 20px 0 20px;
       border-top: 1px solid #e1e1e1;
   }
</style>



